/*
 * Copyright (c) 2011 CDO2 Limited.
 *
 * All rights reserved.
 */
package com.sicong.myproject.client;

import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.dom.client.MouseOutEvent;
import com.google.gwt.event.dom.client.MouseOutHandler;
import com.google.gwt.event.dom.client.MouseOverEvent;
import com.google.gwt.event.dom.client.MouseOverHandler;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.FocusPanel;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Widget;

/**
 * @author sicongz
 *
 */
public class Gallary extends Content
{
    public Gallary()
    {
        Grid grid = new Grid(2, 4);
        grid.setStyleName("wrapper");
        grid.setCellSpacing(25);
        grid.getElement().getStyle().setMarginLeft(-26, Unit.PX);
        grid.getElement().getStyle().setMarginTop(-25, Unit.PX);
        
        grid.setWidget(0, 0, getImage("static/pictures/DSC02127.JPG", 
                                      "Stairs at a countryside hotel"));
        grid.setWidget(0, 1, getImage("static/pictures/DSC02167.JPG",
                                      "Rose washed by rain"));
        grid.setWidget(0, 2, getImage("static/pictures/DSC02975.JPG",
                                      "Beauty of Loch Ness"));
        grid.setWidget(0, 3, getImage("static/pictures/DSC00381.JPG",
                                      "Some stone face"));
        grid.setWidget(1, 0, getImage("static/pictures/DSC00529.JPG",
                                      "Arc de Triomphe"));
        
        initWidget(grid);
    }
    
    private Widget getImage(String path, final String info)
    {
        final Image image = new Image(path);
        image.setStyleName("image");
        
        final HorizontalPanel infoPanel = getInfoPanel(info);
        infoPanel.setVisible(false);
        
        FlowPanel flowPanel = new FlowPanel();
        flowPanel.add(image);
        flowPanel.add(infoPanel);
        
        FocusPanel focusPanel = new FocusPanel();
        focusPanel.add(flowPanel);
        
        final AbsolutePanel absolutePanel = new AbsolutePanel();
        absolutePanel.add(focusPanel);
        absolutePanel.getElement().getStyle().setZIndex(100);
        
        focusPanel.addMouseOverHandler(new MouseOverHandler()
        {
            @Override
            public void onMouseOver(MouseOverEvent event)
            {
                infoPanel.getElement().getStyle().setLeft(5, Unit.PX);
                infoPanel.getElement().getStyle().setTop(image.getOffsetHeight() - 
                                                         35, Unit.PX);
                infoPanel.setVisible(true);
            }
        });
        
        focusPanel.addMouseOutHandler(new MouseOutHandler()
        {
            @Override
            public void onMouseOut(MouseOutEvent event)
            {
                infoPanel.setVisible(false);
            }
        });
        
        return absolutePanel;
    }
    
    private HorizontalPanel getInfoPanel(String info)
    {
        Label label = new Label(info) ;
        
        HorizontalPanel panel = new HorizontalPanel();
        panel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
        panel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
        panel.setStyleName("imageInfo");
        panel.add(label);
        
        return panel;
    }
}
